<template>
    <div class="account-info-wrapper">
        <Card>
            <p slot="title" class="sub-title">
                <span class="account-type">订单列表</span>
            </p>

            <!-- 搜索条件 -->
            <Row class="margin-bottom-20" type="flex">
                <Col>
                    <span style="margin-right:5px">创建时间:</span>
                    <DatePicker type="daterange" split-panels placeholder="选择订单创建时间" style="width:300px" @on-change="dateChange"></DatePicker>
                </Col>
                <Col style="margin-left:20px">
                    <span style="margin-right:5px">关键字:</span>
                    <Input v-model="keyword" placeholder="订单编号/导入人" style="width: 200px" />
                </Col>
                <Col style="margin-left:20px">
                    <Button type="primary" @click="getTableData(true)">搜索</Button>
                </Col>
            </Row>

            <!-- 订单表格 -->
            <Table :columns="columns" :data="tableData" :loading="loading"></Table>

            <!-- 分页 -->
            <Page
                class="margin-top-20 text-center"
                :current.sync="page"
                :total="pagination.total"
                :page-size="pagination.limit"
                @on-change="changePage"></Page>
        </Card>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
import dayjs from 'dayjs'
export default {
  name: 'merchant-orders',
  data () {
    return {
      clientId: null, // 商户id
      keyword: '', // 搜索条件
      start_time: '', // 开始时间
      end_time: '', // 结束时间
      page: 1, // 页数
      loading: false, // 是否正在加载
      modalVisible: false,
      currentDetail: {},
      tableData: [],
      pagination: {
        total: 0,
        limit: 10
      },
      columns: [
        {
          title: '下单时间',
          align: 'center',
          render: (h, params) => {
            const { created_at } = params.row
            return h('span', dayjs(created_at).format('YYYY-MM-DD HH:mm:ss'))
          }
        },
        {
          title: '订单编号',
          align: 'center',
          key: 'external_id'
        },
        {
          title: '订单金额',
          align: 'center',
          key: 'total_amount'
        },
        {
          title: '商品明细',
          align: 'center',
          render: (h, params) => {
            const { devices_detail } = params.row
            const devices = devices_detail.map(value => {
              const { name, number } = value
              return h('p', `${name} * ${number}`)
            })

            return h('div', [devices])
          }
        },
        {
          title: '下单人',
          align: 'center',
          render: (h, params) => {
            const { name } = params.row.order_owner_info
            return h('span', name)
          }
        },
        {
          title: '导入人',
          align: 'center',
          key: 'import_user_name'
        },
        {
          title: '操作',
          align: 'center',
          render: (h, params) => {
            return h(
              'Button',
              {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    const { id } = params.row
                    this.checkOrder(id)
                  }
                }
              },
              '查看'
            )
          }
        }
      ]
    }
  },

  mounted () {
    this.initData()
  },

  methods: {
    initData () {
      const { id } = this.$route.params

      this.clientId = id
      this.getTableData() // 获取表格数据
    },

    /**
         * @param {Array} dates 返回选择的两个日期
         */
    dateChange ([start_time, end_time]) {
      this.start_time = start_time
      this.end_time = end_time
    },

    /**
         * 查询商户下的订单
         * @param { Boolean } withCondition 是否带搜索条件
         */
    getTableData (withCondition = false) {
      this.loading = true
      const params = {
        client_id: this.clientId,
        limit: 10,
        offset: (this.page - 1) * 10
      }

      if (withCondition) {
        if (this.keyword !== '') {
          params.keyword = this.keyword
        }

        if (this.start_time !== '' && this.end_time !== '') {
          params.start_time = new Date(this.start_time).getTime()
          params.end_time = new Date(this.end_time).getTime()
        }
      }

      http.request(this, api.orders, null, params, (res, err) => {
        if (err) {
          this.loading = false
          return
        }

        const { data, count } = res

        this.$set(this.pagination, 'total', count) // 设置总数目
        this.tableData = data
        this.loading = false
      })
    },

    /**
         * 通过订单id查询订单详情
         * @param {Number} orderId 订单id
         */
    checkOrder (orderId) {
      this.$emit('openOrderDetail', orderId) // 打开订单详情
      // this.$router.push(`/merchant/detail/${this.$route.params.id}/order/${orderId}`)
    },

    /**
         * 翻页并且请求数据
         * @param {Number} page
         */
    changePage (page) {
      this.page = page
      this.getTableData(true)
    }
  }
}
</script>